<template>
	<view class="flex-column index-content">

		<view class="flex-column flex-center" style="margin-top: 15%;">
			<view class="canvas-body" :style="bodyStyle">
				<image :src="selectUrl" class="avatar" />
			</view>
			<view @click="getUserProfile" class="user-info-btn font26 flex-center flex-row">
				<image src="../../static/assets/images/ic_shouzhi.png" style="width: 40rpx;height: 40rpx;"
					class="margin-right-xs" />使用微信头像
			</view>
		</view>

		<view class="bottom-btn flex-center">
			<view style="width: 40%;height: 96rpx;background-color: #000000;" @click="onSelectIcon"
				class="cu-btn radius margin-left text-white">选择图片</view>
			<view style="width: 55%;height: 96rpx;" class="cu-btn bg-gradual-pink radius margin-right margin-left"
				@click="onGotoEdit">下一步 ></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectUrl: '',
				userInfo: null,
				canvasSize: '',
				bodyStyle: ''
			}
		},
		onLoad() {
			this.getSysInfo()
			wx.getSetting({
				success: res => {
					if (res.authSetting['scope.userInfo']) {
						// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
						wx.getUserInfo({
							success: res => {
								this.userInfo = res.userInfo
								this.selectUrl = this.headimgHD(res.userInfo.avatarUrl)
							}
						})
					}
				}
			})
		},
		methods: {
			getSysInfo() {
				try {
					const res = uni.getSystemInfoSync();
					this.canvasSize = res.windowWidth - 40;
				} catch (e) {
					this.canvasSize = 300;
				} finally {
					this.bodyStyle = `width:${this.canvasSize}px;height:${this.canvasSize}px`
				}
			},
			onGotoEdit() {
				if (!this.selectUrl) {
					uni.showToast({
						title: "请先选择一个头像",
						duration: 3000,
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/edit/edit?url=${encodeURIComponent(JSON.stringify(this.selectUrl))}`
				});
			},

			onSelectIcon() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.selectUrl = res.tempFilePaths[0]
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			getUserProfile(e) {
				// 获取用户信息
				wx.getSetting({
					success: res => {
						if (!res.authSetting['scope.userInfo']) {
							// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
							wx.getUserInfo({
								success: res => {
									this.userInfo = res.userInfo
									this.selectUrl = this.headimgHD(res.userInfo.avatarUrl)
								}
							})
						} else {
							wx.getUserProfile({
								desc: '用于完善会员资料',
								success: (res) => {
									this.userInfo = res.userInfo
									this.selectUrl = this.headimgHD(res.userInfo.avatarUrl)
								}
							})
						}
					}
				})
			},
			headimgHD(imageUrl) {
				imageUrl = imageUrl.split('/');
				//把大小数值为 46 || 64 || 96 || 132 的转换为0
				if (imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length -
						1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {
					imageUrl[imageUrl.length - 1] = 0;
				}
				imageUrl = imageUrl.join('/'); //重新拼接为字符串
				return imageUrl;
			}
		},

	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100vw;
		height: 100vh;
		background-color: $uni-bg-color;
	}

	.drag {
		width: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
		align-items: center;
		margin: 64rpx 0;
	}

	.avatar {
		width: 100%;
		height: 100%;
		background-color: $uni-bg-color-grey;
	}

	.user-info-btn {
		width: 238rpx;
		background-color: transparent;
		color: #999999;
		padding: 16rpx;
		margin-top: 24rpx;
		border-bottom: 1px solid #999999;
	}

	.bottom-btn {
		position: absolute;
		width: 100%;
		height: 10vh;
		display: flex;
		background-color: #333333;
		flex-direction: row;
		bottom: 0rpx;
	}
</style>
